<template>
    <div class="component-shadow-picker">
        <div class="shadow-item">
            <span>阴影颜色:</span>
            <div class="shadow-component">
                <color-picker :value="values[3]" @change="(v) => { updateValue(v, 3) }"></color-picker>
            </div>
        </div>
        <div class="shadow-item">
            <span>阴影大小:</span>
            <div class="shadow-component">
                <a-slider :value="parseInt(values[0])" :min="0" :max="20"
                    @change="(v) => { updateValue(v, [0, 1]) }"></a-slider>
            </div>
        </div>
        <div class="shadow-item">
            <span>阴影模糊:</span>
            <div class="shadow-component">
                <a-slider :value="parseInt(values[2])" :min="0" :max="20" @change="(v) => { updateValue(v, 2) }"></a-slider>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import ColorPicker from './ColorPicker.vue'
export default defineComponent({
    props: {
        value: {
            type: String,
            required: true
        }
    },
    components: {
        ColorPicker
    },
    emits: ['change'],
    setup(props, context) {
        const values = computed(() => {
            // box shadow should like this
            // 10px 10px 0px red;
            // the first two should be sizes
            // the 3rd one should be blur
            // the last one should be color
            return props.value.split(' ')
        })
        const updateValue = (newValue: number | string, index: number | number[]) => {
            const newValues = computed(() => {
                return values.value.map((item, i) => {
                    if (typeof index === 'number' && i === index) {
                        return typeof newValue === 'number' ? newValue + 'px' : newValue
                    } else if (Array.isArray(index) && index.includes(i)) {
                        return typeof newValue === 'number' ? newValue + 'px' : newValue
                    } else {
                        return item
                    }
                })
            })
            context.emit('change', newValues.value.join(' '))
        }
        return {
            values,
            updateValue
        }
    }
})
</script>

<style>
.shadow-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.shadow-item span {
    width: 28%;
}

.shadow-component {
    width: 70%;
}
</style>
